<template>
  <div class="cart">
    <Header title="购物车" :right="true"></Header>
    <div class="content">
      <CartDetail v-if="isShow" :changeShow="changeShow"></CartDetail>
      <Empty v-else></Empty>
    </div>

    <Footer></Footer>
  </div>
</template>

<script setup>
import Header from "@/components/Header.vue";
import Empty from "@/components/Empty.vue";
import CartDetail from "./components/cartDetail.vue";
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
const store = useStore();
let isShow = ref(true);

function init() {
  if (store.state.cartList.length === 0) {
    isShow.value = false;
  }
}
// 控制兜底样式的状态
function changeShow() {
  isShow.value = false;
}

onMounted(() => {
  init();
});
</script>

<style lang="less" scoped>
.cart {
  display: flex;
  flex-direction: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
